import { Card, message } from 'antd';
import { ProFormSelect, ProFormText, ProList, QueryFilter } from '@ant-design/pro-components';
import { SpaceItem, SpaceQueryBean } from './types';
import { pageQuerySpace } from './service';
import { useEffect, useState } from 'react';
import { getTenantList } from '@/pages/Tenant/Tenant/service';
import BerthHistory from './component/BerthHistory';
import styles from './style.less';
import { useModel } from 'umi';

export default () => {
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser?.permissions;
  const { 'SPACE.VIEW': view, 'SPACE.RECORD.VIEW': record } = currUser;

  const statusMap = new Map<number, string>();
  statusMap.set(1, '入场');
  statusMap.set(2, '在场');
  statusMap.set(4, '出场');
  statusMap.set(8, '空场');
  statusMap.set(16, '异常');
  statusMap.set(128, '预入场');
  statusMap.set(256, '预出场');
  statusMap.set(512, '入场修正');
  statusMap.set(1024, '道路过车抓拍');

  const queryBean: SpaceQueryBean = {
    page: 1,
    pageSize: 12,
  };

  const [spaceListData, setSpaceDataList] = useState<SpaceItem[]>();
  const [total, setTotal] = useState<number>(0);
  const [recordVisible, setRecordVisible] = useState<boolean>(false);
  const [spaceId, setSpaceId] = useState<string>();

  const querySpace = () => {
    pageQuerySpace(queryBean).then((res) => {
      setSpaceDataList(res.data);
      setTotal(res.total === undefined ? 0 : res.total);
    });
  };

  const viewSpaceRecord = (e: string) => {
    if (record) {
      setSpaceId(e);
      setRecordVisible(true);
    } else {
      message.warn('没有泊位历史查询权限');
    }
  };

  useEffect(() => {
    querySpace();
  }, []);

  return (
    <>
      <QueryFilter
        onFinish={async (values) => {
          queryBean.device_no = values.device_no;
          queryBean.space_no = values.space_no;
          queryBean.road_name = values.road_name;
          queryBean.status = values.status;
          queryBean.tenant_id = values.tenant_id;
          querySpace();
        }}
        onReset={async () => {
          queryBean.device_no = undefined;
          queryBean.space_no = undefined;
          queryBean.road_name = undefined;
          queryBean.status = undefined;
          queryBean.tenant_id = undefined;
          querySpace();
        }}
      >
        <ProFormText name="device_no" label="设备编号" />
        <ProFormText name="space_no" label="泊位编号" />
        <ProFormText name="road_name" label="路段名称" />
        {view && (
          <ProFormSelect
            name="status"
            label="泊位状态"
            showSearch
            valueEnum={{
              1: '入场',
              2: '在场',
              4: '出场',
              8: '空场',
              16: '异常',
              128: '预入场',
              256: '预出场',
              512: '入场修正',
              1024: '道路过车抓拍',
            }}
          />
        )}
        <ProFormSelect
          name="tenant_id"
          label="所属用户"
          showSearch
          request={async () => {
            const res = await getTenantList({});
            let list: any = [];
            res.data.forEach((item: any) => {
              let temp = {};
              temp['value'] = item.id;
              temp['label'] = item.name;
              list.push(temp);
            });
            console.log(list);

            return list;
          }}
        />
      </QueryFilter>
      <ProList<SpaceItem>
        className={styles.List}
        style={{ padding: 0 }}
        headerTitle=" "
        pagination={{
          defaultPageSize: 12,
          showSizeChanger: false,
          total: total,
          onChange: (page, pageSize) => {
            queryBean.page = page;
            queryBean.pageSize = pageSize;
            querySpace();
          },
        }}
        showActions="hover"
        grid={{ gutter: 16, column: 4 }}
        dataSource={spaceListData}
        metas={{
          content: {
            render: () => {
              return <div style={{ display: 'none' }}>222</div>;
            },
          },
          actions: {
            dataIndex: 'id',
            render: (_, record) => {
              return (
                <div
                  style={{
                    height: 'calc(var(--vh, 25.6vh) - 62px)',
                  }}
                >
                  <div
                    style={{
                      backgroundImage:
                        record.device_status === 0
                          ? 'url(/parking_status.svg)'
                          : record.picture_url
                          ? `url(${record.picture_url} `
                          : 'url(/test1.svg)',
                      backgroundSize: 'cover',
                      position: 'absolute',
                      width: 'calc(var(--vw, 25.2vw) - 40px)',
                      height: 'calc(var(--vh, 25.6vh) - 12px)',
                    }}
                    onClick={() => viewSpaceRecord(record.id)}
                  >
                    {record.device_status === 0 && (
                      <div
                        style={{
                          width: '100%',
                          backgroundColor: '#777777',
                          position: 'absolute',
                          height: 'calc(var(--vh, 4.5vw) - 12px)',
                          bottom: 0,
                          paddingTop: 2,
                          paddingLeft: 20,
                          color: '#FFFFFF',
                          fontWeight: 500,
                          fontSize: 10,
                          display: 'flex',
                          justifyContent: 'space-between',
                          paddingRight: 50,
                        }}
                      >
                        <div style={{ display: 'grid' }}>
                          <span>{'路段名称: ' + record.road_name}</span>
                          <span>{'泊位编号: ' + record.space_no}</span>
                          <span>{'设备编号: ' + record.device_no}</span>
                        </div>
                      </div>
                    )}
                    {record.device_status === 1 && (
                      <div
                        style={{
                          width: '100%',
                          backgroundColor: 'rgba(0, 0, 0, 0.45)',
                          position: 'absolute',
                          height: 'calc(var(--vh, 4.5vw) - 12px)',
                          bottom: 0,
                          paddingLeft: 20,
                          paddingTop: 2,
                          color: '#FFFFFF',
                          fontWeight: 500,
                          fontSize: 10,
                          display: 'flex',
                          justifyContent: 'space-between',
                          paddingRight: 50,
                        }}
                      >
                        <div style={{ display: 'grid' }}>
                          <span>{'路段名称: ' + record.road_name}</span>
                          <span>{'泊位编号: ' + record.space_no}</span>
                          <span>{'设备编号: ' + record.device_no}</span>
                        </div>
                        <div style={{ display: 'grid' }}>
                          <span>{'时间: ' + record.picture_time}</span>
                          <span>{'车牌号码: ' + record.plate_number}</span>
                          <span>{'泊位状态: ' + statusMap.get(record.status)}</span>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              );
            },
          },
        }}
      />
      {recordVisible && spaceId && (
        <BerthHistory
          spaceId={spaceId}
          visible={recordVisible}
          onClose={() => setRecordVisible(false)}
        />
      )}
    </>
  );
};
